<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-08-20 16:42:01
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-11-22 15:26:22
 * @FilePath: /nhw/src/components/Tabbar/index.vue
-->
<template>
  <Tabbar
    router
    :value="active"
    fixed
    active-color="#696473"
    inactive-color="#aaa"
  >
    <TabbarItem
      :to="{ name: item.name }"
      v-for="(item, index) in tabList"
      :key="index"
      :badge="item.name === 'Message' ? 2 : ''"
    >
      <span>{{ item.title }}</span>
      <template #icon="props">
        <img :srcset="props.active ? item.active : item.inactive" />
      </template>
    </TabbarItem>
  </Tabbar>
</template>

<script>
import { Tabbar, TabbarItem } from "vant";
import job from "assets/img/tabbarIcon/job.png";
import jobx2 from "assets/img/tabbarIcon/job@2x.png";
import jobOn from "assets/img/tabbarIcon/job_line.png";
import jobOnx2 from "assets/img/tabbarIcon/job_line@2x.png";
import task from "assets/img/tabbarIcon/task.png";
import taskx2 from "assets/img/tabbarIcon/task@2x.png";
import taskOn from "assets/img/tabbarIcon/task_line.png";
import taskOnx2 from "assets/img/tabbarIcon/task_line@2x.png";
import imessage from "assets/img/tabbarIcon/imessage.png";
import imessagex2 from "assets/img/tabbarIcon/imessage@2x.png";
import imessageOn from "assets/img/tabbarIcon/imessage_line.png";
import imessageOnx2 from "assets/img/tabbarIcon/imessage_line@2x.png";
import me from "assets/img/tabbarIcon/me.png";
import mex2 from "assets/img/tabbarIcon/me@2x.png";
import meOn from "assets/img/tabbarIcon/me_line.png";
import meOnx2 from "assets/img/tabbarIcon/me_line@2x.png";

export default {
  name: "myTabbar",

  components: {
    Tabbar,
    TabbarItem,
  },
  props: {
    tabList: {
      type: Array,
      default: () => [
        {
          title: "工作",
          name: "Work",
          active: jobx2,
          inactive: jobOnx2,
        },
        {
          title: "任务",
          name: "Assignment",
          active: taskx2,
          inactive: taskOnx2,
        },
        {
          title: "消息",
          name: "Message",
          active: imessagex2,
          inactive: imessageOnx2,
        },
        {
          title: "我的",
          name: "Profile",
          active: mex2,
          inactive: meOnx2,
        },
      ],
    },
  },
  data() {
    return {};
  },
  computed: {
    active() {
      return this.tabList.findIndex((item) => {
        return this.$route.name === item.name;
      });
    },
  },

  mounted() {},

  methods: {},
  deactivated() {
    console.log("deactivated");
  },
  activated() {
    console.log("activated");
  },
  updated() {
    console.log("updated");
  },
  destroyed() {
    console.log("destroyed");
  },
};
</script>

<style lang="less" scoped>
</style>